<template>
  <div>
      <a-card>
      <a-cascader :options="paramsList" placeholder="请选择" @change="onChange" :fieldNames="fieldNames" v-model="value" />
      <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="动态参数">
        <a-table
        :row-key="(record) => record.id"
        :columns="columns"
        :data-source="userList"
        :pagination="pagination"
        @change="handleTableChange"
        bordered
      >
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="静态属性" force-render>
        <a-table
        :row-key="(record) => record.id"
        :columns="columns"
        :data-source="userList"
        :pagination="pagination"
        @change="handleTableChange"
        bordered
      >
        </a-table>
      </a-tab-pane>
    </a-tabs>
    </a-card>
  </div>
</template>

<script>
import {getParamsList} from '@/network/params'
import {getCatList} from '@/network/category'
export default {
    components:{},
    data(){
        return{
            paramsList:[],
            fieldNames:{
                label:'cat_name',
                value:'cat_id',
                children:'children'
            },
            value:[],
            pagination: {
        total: 0,
        current: 1,
        pageSize: 5,
        showSizeChanger: true,
        pageSizeOptions: ["5", "10", "15", "20", "25"],
      },
            columns:[
                {
          title: "序号",
          customRender: (text, record, index) => {
            return (
              this.pagination.pageSize * (this.pagination.current - 1) +
              index +
              1
            );
          },
          align: "center",
        },
        {
          title: "用户名",
          dataIndex: "username",
          align: "center",
        },
            ]
        }
    },
    created(){
        this.getParamsList()
        this.getAllGoods()
    },
    methods:{
        //获取所有商品的数据
        getAllGoods(){
            getCatList().then(
                res =>{
                    this.paramsList=res.data
                }
            )
        },
        onChange(value) {
             if(this.value.length!==3){
                 this.value=[]
                 return
             }
             console.log(value);
        },
        getParamsList(){
            getParamsList().then(
                res =>{}
            )
        },
        handleTableChange(pagination) {
      this.pagination = pagination;
      this.getParamsList();
    },
    }
}
</script>

<style lang="less" scoped>

</style>